<template>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" :src="item.img">
                <div class="mui-media-body">
                    <h4>{{item.title}}</h4>
                    <p class='mui-ellipsis'>
                        <span>发表时间：{{item.add_time}}</span>
                        <span>点击:{{item.click}}次</span>
                    </p>
                </div>
            </a>
        </li>
    </ul>
</template>

<script>
export default{
    data(){
        return {
            newslist:[]
        }
    },
    methods:{
        getNewsList(){
            this.newslist = [
                {id:0,add_time:'2016-02-02 12:12:12',title:'标题1',desc:'desc1',img:'https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/vue/vue.png',click:0},
                {id:1,add_time:'2017-02-02 12:12:13',title:'标题2',desc:'desc2',img:'https://raw.githubusercontent.com/github/explore/fd96fceccf8c42c99cbe29cf0f8dcc4736fcb85a/topics/nodejs/nodejs.png',click:1},
                {id:2,add_time:'2018-02-02 12:12:14',title:'标题3',desc:'desc3',img:'https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/javascript/javascript.png',click:2}
            ]
        }
    },
    created(){
        this.getNewsList()
    }
}
</script>

<style lang="sass" scoped>
.mui-media-body{
    h4{
        color: #333;
        font-size:14px;
    }
    .mui-ellipsis{
        color:#26a2ff;
        font-size:12px;
        display:flex;
        justify-content:space-between;
    }
}
</style>


